<script setup>
import { useWindowScroll } from '@vueuse/core'

import {ref} from 'vue'
import {ElMessage} from "element-plus"
import ImageClassifier from "@/components/base/imageClassifier.vue"
import {useRouter} from 'vue-router'

// y表示具体顶部的滚动距离 会动态更新
const { y:top } = useWindowScroll()

// 强制更新输入框的值
function changeMessage() {
  this.$forceUpdate()
}
const router=useRouter()
const text=ref('')
const loading=ref(false)

const searchGoods = () => {
  if (!text.value) {
    ElMessage.warning('请输入搜索关键词');
    return
  }
  router.push({
    path: `/category/${text.value}`,
    query: {
      date: new Date().getTime()
    }
  })
}

</script>

<template>
<div class="bar-sticky" :class="{show:top >= 300}">

    <div class="left">
      <img src="../../assets/SAS-logo.png" style="height: 45px;position: relative;
  left: 100px;" alt="">
    </div>

    <div class="center" v-loading="loading"
         element-loading-text="正在识别...">
      <el-input placeholder="苹果" class="input-with-select" @input="changeMessage($event) " v-model="text">
        <template #suffix>
          <image-classifier v-model:input="text" v-model:loading="loading" style="margin-top: 10px"></image-classifier>
          <el-button class="searchBtn" @click="searchGoods">搜索</el-button>
        </template>
      </el-input>
    </div>

</div>
</template>

<style scoped lang="less">

.bar-sticky {
  width: 100%;
  height: 80px;
  background-color: #ffffff;
  box-shadow: 0 1px 10px 0 #11191f3d;

  display: flex;
  padding: 20px 0;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;

  // 默认情况下完全把自己移动到上面
  transform: translateY(-100%);
  // 完全透明
  opacity: 0;
  // 显示出来的类名
  &.show {
    transition: all 0.3s linear;
    transform: none;
    opacity: 1;
  }
}
.left{
  float: left;
}
.center{
  flex: 1;
  display: flex;
  justify-content: center;
  margin-right: 100px;
}


.input-with-select{
  width: 700px;
  height: 45px;
  //--el-input-border-radius: 10px;
  //--el-input-border-color: #0b9d10;
  //--el-input-hover-border-color: #0b9d10;
  //--el-input-clear-hover-color: #0b9d10;
  //--el-input-focus-border-color: #0b9d10;
  :deep(.el-input__wrapper) {
    padding: 1px 6px 0  15px ;
    border-radius:10px;
    box-shadow: 0 0 0 0.45mm #39bf3e inset;
  }
}

.camera:hover{
  cursor: pointer;
}

.searchBtn {
  margin-left: 15px;
  width: 90px;
  height: 35px;
  border-radius:10px;
  color: white !important;
  background-color: #39bf3e !important;
}
</style>